<template>
	<view>
		<!-- 主体 -->
		<view class="page page-reflect" style="padding-bottom: 0;">
			<!-- 筛选 -->
			<view class="filter-bar flex-row-between">
				<block v-for="(item, index) in filterBar" :key="index">
					<view class="item" :class="{'active' : filterCurrent == item.id}" @click="filterList(item.id)">{{item.title}}</view>
				</block>
			</view>
			<view class="hr7"></view>
			<!-- 列表 -->
			<LoadMore ref="LoadMore" id="LoadMore" :token="true" :diffHeight="92" :initData="initData" @dataRefresh='dataRefresh'>
				<view class="reflect-list">
					<view class="item font13" v-for="(item, index) in dataList" :key="index">
						<view class="p1 flex-row-between">
							<view>订单号：{{item.order_code}}</view>
							<view>{{item.flag}}</view>
						</view>
						<view class="p2 flex-row-between">
							<view class="font-969696">2020/03/10 10:00</view>
							<view>申请提现：<text class="font-assist">{{item.coin}}</text> 纽扣币</view>
						</view>
						<view v-if="item.status == 'refund' || item.status == 'lock'" class="p3">
							<view>{{item.status_msg ? item.status_msg : '暂无原因'}}</view>
						</view>
					</view>
				</view>
			</LoadMore>
		</view>
	</view>
</template>

<script>
	import LoadMore from "@/components/j-loadMore/index.vue";
	export default {
		components: { LoadMore },
		data() {
			return {
				filterBar: [
					{ id: 'hidden', title: '待打款'},
					{ id: 'normal', title: '已打款'},
					{ id: 'refund', title: '已退款'},
					{ id: 'lock', title: '已冻结'}
				],
				filterCurrent: 'hidden', // 高亮的id
				dataList: [],
				// 传参数据
				initData: {
					url: 'extract',
					param: {
						status: 'hidden'
					}
				},
			}
		},
		onLoad() {
		},
		methods: {
			// 筛选列表
			filterList (id) {
				this.filterCurrent = id
				this.initData.param.status = id
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// LoadMore返回列表数据
			dataRefresh(e){
				this.dataList = e
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
